<template>
	<view class="login">
		<view class="login-image">
			<image src="../../static/image/logo2.png"></image>
		</view>
		<!-- 登录 -->
		<view class="login-input">
			<view class="login-phone">
				<image src="../../static/image/phone_1.png"></image>
				<input type="text" value="" placeholder="请输入手机号" v-model="mobile">
			</view>
			<view class="login-yz">
				<image src="../../static/image/code_2.png"></image>
				<input type="text" value="" placeholder="验证码" v-model="code">
				<view class="wrap">
					<u-toast ref="uToast"></u-toast>
					<u-code :seconds="seconds" @end="end" @start="start" ref="uCode" @change="codeChange"></u-code>
					<u-button @tap="getCode" style="border: none;">{{tips}}</u-button>
				</view>
			</view>
			<view class="login-denglu">
				<u-button type="error" text="登录" @click="userLogin"></u-button>
			</view>
			<u-toast ref="uToast"></u-toast>
			<!-- 账号密码登录 -->
			<navigator url="../../subpackages/login/login">
				<view class="login-qiehuan">
					快速登录
				</view>
			</navigator>
		</view>
	</view>
</template>

<script>
	import {
		Login,
		userLogin
	} from "../../network/login.js"
	export default {
		data() {
			return {
				tips: "",
				mobile: '', //手机号
				code: "", //验证码
				seconds: 60,
			}
		},
		methods: {
			codeChange(text) {
				this.tips = text;
			},
			// 获取验证码
			async getCode() {
				if (!this.mobile.length) {
					this.$refs.uToast.show({
						type: "default",
						message: "请输入手机号！",
					});
					return;
				}
				// 检测手机号是否为空
				if (!/^[1][3|4|5|7|8][0-9]{9}$/.test(this.mobile)) {
					//手机号不合法
					this.$refs.uToast.show({
						type: "default",
						message: "请输入正确手机号！",
					});
					return;
				}
				if (this.$refs.uCode.canGetCode) {
					uni.showLoading({
						title: '正在获取验证码'
					})
					let data = await Login(this.mobile)
					console.log(data);
					setTimeout(() => {
						uni.hideLoading();
						// 这里此提示会被this.start()方法中的提示覆盖
						uni.$u.toast('验证码已发送');
						// 通知验证码组件内部开始倒计时
						this.$refs.uCode.start();
					}, 1000);
				} else {
					uni.$u.toast('倒计时结束后再发送');
				}
			},
			//登录验证成功后回到主页面
			async userLogin() {
				let {
					mobile,
					code
				} = this
				// console.log(code);
				let res = await userLogin(code, mobile)
				if (res.code==200) {
					console.log(res);
					let token = res.data.token
					console.log(token);
					uni.setStorageSync('_token', token)
					uni.switchTab({
						url: "/pages/index/index"
					})
				} else{
					uni.showToast({
						title:"验证码错误",
						icon:'error'
					})
				}
					
			}
		}
	}
</script>

<style lang="scss">
	page {
		height: 100%;
		background-color: #efefef !important;
	}
	.login {

		.login-image {
			text-align: center;
			margin-top: 100px;
			margin-bottom: 50px;

			image {
				width: 80px;
				height: 80px;
			}
		}

		.login-input {
			width: 80%;
			margin: auto;

			.login-phone {
				display: flex;
				height: 45px;
				align-items: center;
				margin-bottom: 5px;
				background-color: white;
				border-radius: 7px;

				input {
					padding-left: 5px;
					font-size: 12px;
				}

				image {
					padding-left: 9px;
					width: 20px;
					height: 20px;
				}
			}

			.login-yz {
				display: flex;
				height: 45px;
				align-items: center;
				margin-bottom: 5px;
				background-color: white;
				border-radius: 7px;

				input {
					padding-left: 5px;
					font-size: 12px;
				}

				image {
					padding-left: 9px;
					width: 20px;
					height: 20px;
				}

				.login-btn {
					width: 60px;
					height: 100%;
					color: green;
					font-size: 14px;
					border: none;
				}
			}

			.login-denglu {
				margin-top: 40px;

				button {
					border-radius: 20px;
					background-color: red;
				}
			}
		}
	}
	.login-qiehuan{
		padding-top: 20px;
		font-size: 14px;
		opacity: 0.5;
		text-align: center;
	}
</style>
